$main-class: theme-drawer;
$shared-toolbar: theme-toolbar;

.#{$main-class} {
  background-color: #404040;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -ms-flex-direction: column;
  i {
    color: #fff;
  }
  body:not(.mdui-locked) & {
    .theme-toolbar-top button {
      display: none;
    }
  }
}

// Header
.#{$main-class}__header {
  $sub-class: #{$main-class}__header__layer;
  background-color: inherit;
  height: 128px;
  .#{$sub-class}-1, .#{$sub-class}-2 {
    position: absolute;
    background-color: inherit;
  }
  .#{$sub-class}-1 {
    font-size: 60px;
    font-weight: 800;
    width: 100vw;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-transform: translateX(290px);
            transform: translateX(290px);
    -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
    @media (min-width: 600px) {
      -webkit-transform: translateX(330px);
              transform: translateX(330px);
    }
    @media (max-width: 599px) {
      font-size: 40px;
    }
    @media (min-width: 1024px) {
      display: none;
    }
    .#{$main-class}.mdui-drawer-open & {
        -webkit-transform: translateX(0px) !important;
                transform: translateX(0px) !important;
    }
  }
  .#{$sub-class}-2 {
    $sub-sub-class: #{$sub-class}-2__user;
    display: none;
    width: 100%;
    height: 128px;
    background-repeat: repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-origin: padding-box;
    background-attachment: scroll;
    @media (min-width: 1024px) {
      display: inherit;
    }
    .#{$sub-sub-class}__avatar {
      width: 48px;
      height: 48px;
      margin: 12px;
    }
    .#{$sub-sub-class}__info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding-left: 16px;
      height: 48px;
    }
    .#{$sub-sub-class}__info__author {
      font-size: 16px;
      font-weight: 500;
    }
    .#{$sub-sub-class}__info__slogan {
      font-size: 12px;
      margin: 4px 0;
    }
  }
}

// Warpper
.#{$main-class}__warpper {
  $sub-class: #{$main-class}__warpper;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: auto;
  height: 0;
  -webkit-box-flex: 1;
  box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  & .#{$sub-class}__content {
    overflow: inherit;
    & > .mdui-list {
      padding-top: 0;
    }
  }
  & .#{$sub-class}__footer {
    margin: 5px 24px 24px 24px;
    -webkit-box-flex: none;
    -ms-flex: none;
    flex: none;
  }
}
